<!--交通物流-->
<template>
    <div class="rightView">
        <transition name="animationRL">
            <div v-show="shows" style="display: flex;flex-direction: column">
                <div class="container">
                    <div class="container_title3">
                        <span>道路智能卡口监测</span>
                    </div>
                    <div class="container_table">
                        <div class="container_table_header">
                            <div>车牌号</div>
                            <div>车辆图片</div>
                            <div>类型</div>
                            <div style="width: 35%">进入时间</div>
                        </div>
                        <div class="container_table_subject userFlex" ref="tableContainer" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
                            <div
                                    class="container_table_subject_line"
                                    v-for="(item, i) in tableList"
                                    :key="i"
                            >
                                <div>{{ item.carNum }}</div>
                                <div class="image-container" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
                                    <img :src="item.carNumPic" alt=""/>
                                </div>
                                <div>{{ item.recTypeStr }}</div>
                                <div style="width: 35%">{{ item.capDateStr }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="container_title3">
                        <span>车辆监控</span>
                    </div>
                    <div class="container_table">
                        <div class="container_table_header">
                            <div style="width: 20%">车牌号</div>
                            <div style="width: 60%">进入时间</div>
                            <div style="width: 20%">状态</div>
                        </div>
                        <div class="container_table_subject userFlex" ref="infoObject" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
                            <div
                                    class="container_table_subject_line"
                                    v-for="(item, i) in tableList2"
                                    :key="i"
                            >
                                <div style="width: 20%">{{ item.infoObject.carNum }}</div>
                                <div style="width: 33.3%">{{ item.infoObject.capTime }}</div>
                                <div
                                        :style="{color: item.infoObject.carDirect === 8 ? '#37F447' : item.up === 9 ? '#FFFFFF' : 'red'}"
                                        style="width: 20%">{{ item.infoObject.carDirect === 8 ? '在园' : '离园' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="container_title3">
                        <span>交通监控</span>
                    </div>
                    <div class="container_table">
                        <div class="container_table_header">
                            <div style="width:40%">交通监控摘要</div>
                            <div style="width: 20%">状态</div>
                            <div style="width: 20%">类型</div>
                        </div>
                        <div class="container_table_subject userFlex" ref="viedeoData" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
                            <div
                                    class="container_table_subject_line"
                                    v-for="(item, i) in viedeoData"
                                    :key="i"
                            >
                                <div style="width: 40%">{{ item.channelName }}</div>
                                <div style="width: 20%"
                                     :style="{color: item.isOnline === 1 ? '#37F447' : item.isOnline === 0 ? '#F64347' : '#0000FF'}">
                                    {{ item.isOnline === 1 ? '在线' : '离线' }}
                                </div>
                                <div style="width: 20%;" @click="viewViedoFn(item)">{{ `查看` }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <div class="shrink" @click="shows=!shows"></div>
        <el-dialog class="monitorDialog"  :visible.sync="showViewViedo" :destroy-on-close="false" :show-close="false" append-to-body>
            <viewViedo  ref="viewViedoRef" @close="showViewViedo"  @showViewViedo="showViewViedo=false"  :videoId = 'videoId'  style="position: absolute; left: 50%; top: 50%; z-index: 100; transform: translate(-50%, -50%)"></viewViedo>
        </el-dialog>
    </div>

</template>

<script>
import {carPageList, getDetection, getTrafficList} from "@/api/traffic/axios";
import {getAuth} from "@/api/consumption/axios";
import viewViedo from "@/components/video/viewViedo.vue";

export default {
    name: "floatLeft",
    components:{viewViedo},
    data() {
        return {
            shows: true,
            // 道路智能卡口监测
            tableList: [],
            // 车辆监控
            tableList2: [],
            // 交通监控
            tableList3: [],
            viedeoData: [],
            //视频通道流
            videoId: '',
            showViewViedo: false,
            closeVieo:true,
            selectedPlayMonotorId: "",
            //图片token
            tokenData: '',
            combinedChannelsArray: [],
            //车牌图片放大
            isMouseOver: false,
            scrollSpeed: 70, // 调整滚动速度，数值越小滚动越快
            scrollInterval: null,
        }
    },
    mounted() {
        this.getCarPageList();
        this.getTraffic()
        // 道路智能卡口监测
        this.getDetection()
        // 图片token
        // this.getAuth()
        this.startAutoScroll();

    },
    beforeDestroy() {
        this.stopAutoScroll(); // 组件销毁前停止滚动
    },
    methods: {
        stopAutoScroll() {
            clearInterval(this.scrollInterval);
        },
        startAutoScroll() {
            this.stopAutoScroll(); // 首先停止任何现有的滚动
            const container = this.$refs.tableContainer;
            const infoObject = this.$refs.infoObject;
            const viedeoData = this.$refs.viedeoData;
            const containerHeight = container.clientHeight;
            const contentHeight = container.scrollHeight;
            let scrollTop = 0;
            const scroll = () => {
                scrollTop += 1;
                if (scrollTop >= contentHeight) {
                    scrollTop = 0;
                }
                container.scrollTop = scrollTop;
                infoObject.scrollTop = scrollTop;
                viedeoData.scrollTop = scrollTop;
            };
            this.scrollInterval = setInterval(scroll, this.scrollSpeed);
        },
        // 车辆监控
        getCarPageList() {
            carPageList().then(res => {
                const {records} = res.data
                this.tableList2 = records
                console.log(this.tableList2, '车辆监控')
            })
        },
        // 交通监控
        getTraffic() {
            let params = {
                pageNum: 1,
                pageSize: 100,
                categorys: ['5'],
            }
            getTrafficList({...params}).then(res => {
                let newData = res.data[0].data.pageData
                let combinedUnitsArray = [];
                newData.forEach(item => {
                    if (item.units && Array.isArray(item.units)) {
                        combinedUnitsArray = combinedUnitsArray.concat(item.units);
                    }
                });
                this.viedeoData = combinedUnitsArray.reduce((accumulator, currentValue) => {
                    if (currentValue.channels && Array.isArray(currentValue.channels)) {
                        accumulator = accumulator.concat(currentValue.channels);
                    }
                    return accumulator;
                }, []);
                console.log(this.viedeoData, 'combinedUnitsArray');

            })
        },
        // 道路智能卡口监测
        // getDetection() {
        //     let _this = this
        //     getDetection().then((res) => {
        //         if (res.data && res.data.list.length > 0) {
        //             _this.tableList = res.data.list
        //         }
        //         console.log(_this.tableList, '道路智能卡口监测')
        //     })
        // },
        getDetection() {
            let _this = this
            getAuth().then((authRes) => {
                _this.tokenData = authRes.accessToken;

                getDetection().then((res) => {
                    if (res.data && res.data.list.length > 0) {
                        _this.tableList = res.data.list;

                        // 遍历 tableList 数组并更新 carNumPic 的URL
                        for (let item of _this.tableList) {
                            item.carNumPic = `https://172.22.12.15/evo-apigw/evo-oss/${item.carNumPic}?accessToken=${_this.tokenData}`;
                        }
                    }
                    console.log(_this.tableList, '道路智能卡口监测');
                });
            });
        },
        // 图片token
        getAuth() {
            let _this = this
            getAuth().then((res) => {
                _this.tokenData = res.accessToken
            })
        },
        viewViedoFn(data) {
            console.log(this.$refs.viewViedoRef,'viewViedoRef')
            this.showViewViedo = true;
            this.videoId = data.channelCode
            // this.selectedPlayMonotorId = data.playMonotorId;

            // if (this.myPlayer) {
            //     this.myPlayer.playRealVideo({
            //         channelList: [{
            //             id: String(this.videoId), /** 在线的通道id **/
            //             // id: '1000047$1$0$0',
            //             isOnline: true, /** 设备是否在线，非在线无法播放 **/
            //         }],
            //         streamType: "1"
            //     })
            // }
        },
        //车牌图片放大
        handleMouseOver() {
            this.isMouseOver = true;
        },
        handleMouseOut() {
            this.isMouseOver = false;
        },
    }
}
</script>

<style lang="scss">

.height200 {
  width: 570px;
  height: 200px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.statistical-scrollbar {
  width: 220px;
  height: 130px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .height200 {
    height: calHeight_2k(200px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }

  .statistical-scrollbar {
    height: calHeight_2k(130px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.image-container {
    overflow: hidden;
    transition: transform 0.3s; /* 添加过渡效果 */
    cursor: zoom-in; /* 鼠标移入显示放大图标 */
}

.image-container:hover {
    transform: scale(3); /* 图片放大的比例，可以根据需要调整 */
    cursor: zoom-out; /* 鼠标移入显示缩小图标 */
}

.image-container img {
    width: 100%; /* 设置图片宽度 */
    height: auto;
}
.ws-player {
    width: 260px;
    height: 120px;
    margin-top: 16px;
}
.monitorC {
  position: relative;
  width: 662px;
  height: 440px;
  display: flex;
  overflow: hidden;
  background-size: 100% 100%;
  background-image: url("@/assets/news/bg_news.png");
  flex-direction: column;

  .ws-player {
    width: 95%;
    height: 82%;
    margin-left: 2.5%;
    margin-top: 1.5%;
  }

  &_title {
    margin-left: 22px;
    width: 216px;
    height: 24px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_title1.png");

    span {
      height: 24px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 11px;
      line-height: 24px;
      background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &_close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 30px;
    width: 23px;
    height: 22px;
    background-size: 100% 100%;
    background-image: url("@/assets/news/icon_closenews.png");
  }

  .videoStyle {
    position: absolute;
    width: 560px;
    height: 260px;
    margin-left: 50px;
    max-height: 300px;
  }
}

.marginL21 {
  margin-left: 21px;
}

.marginL13 {
  margin-left: 6px;
}

.rightView {
  float: right;
  margin-top: 20px;
  display: flex;
  height: 630px;
  flex-direction: row;
  align-items: center;
    cursor: pointer;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink_r.png");
  }

  .container {
    width: 474px;
    height: 193px;
    padding-left: 22px;
    background-size: 100% 100%;
    display: flex;
    background-image: url("@/assets/bg_left1.png");
    flex-direction: column;

    &-titleBgc {
      width: 445px;
      height: 3px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_table {
      width: 450px;
      height: 124px;
      margin-top: 5px;
      font-size: 14px;
      font-family: Noto Sans SC-Medium, Noto Sans SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);

      &_header {
        width: 100%;
        height: 20px;
        background: rgba(98, 183, 255, 0.2);
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 20px;

        div {
          width: 22%;
        }
      }

      &_subject {
        width: 100%;
        height: 100px;

        &_line {
          width: 100%;
          height: 18px;
          margin-top: 8px;
          margin-bottom: 8px;
          display: flex;
          justify-content: space-between;
          text-align: center;

          div {
            width: 22%;
            cursor: pointer;

            img {
              width: 50px;

            }
          }
        }
      }
    }

    &_title3 {
      width: 450px;
      height: 24px;
      margin-top: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 24px;
          margin-left: 11px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_intention {
      width: 238px;
      position: relative;
      height: 161px;

      &_line {
        width: 100%;
        height: 1px;
        background: #EEEBE9;
        opacity: 0.4;
      }

      &_bg {
        position: absolute;
        width: 238px;
        height: 161px;
        background: #19508E;
        opacity: 0.36;
      }

      &_title {
        text-align: center;
        width: 25%;
        height: 18px;
        line-height: 18px;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.4;
      }

      &_type {
        width: 25%;
        height: 30px;
        line-height: 30px;
        font-size: 9px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
      }

      &_num {
        width: 25%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

}

.trackContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

  .track {
    width: 269px;
    height: 41px;
    margin-right: 5px;
    display: flex;
    margin-top: 5px;
    flex-direction: column;
    justify-content: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_track.png");

    .icon {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-image: url("@/assets/icon_track.png");
    }

    .name {
      margin-left: 7px;
      height: 14px;
      font-size: 10px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #1CFDFF;
      line-height: 14px;
    }

    .type {
      //white-space: nowrap;
      margin-top: 5px;
      height: 8px;
      font-size: 8px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 8px;
      overflow: hidden; /* 控制超出部分隐藏 */
      word-break: break-all; /* 超出部分强制换行 */
    }
  }
}

.intentionStyle {
  width: 300px;
  height: 200px;
}

.intentionContainerPadding {
  padding: 10px 16px 0px 15px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .marginL21 {
    margin-left: calHeight_2k(6px);
  }

  .marginL13 {
    margin-left: calHeight_2k(6px);
  }

  .rightView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);
    position: relative;
    z-index: 3;

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      height: calHeight_2k(193px);

      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &_table {
        height: calHeight_2k(124px);
        margin-top: calHeight_2k(5px);

        &_header {
          height: calHeight_2k(20px);
          line-height: calHeight_2k(20px);
        }

        &_subject {
          height: calHeight_2k(100px);

          &_line {
            height: calHeight_2k(18px);
            margin-top: calHeight_2k(8px);
            margin-bottom: calHeight_2k(8px);
          }
        }
      }

      &_title3 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(15px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_intention {
        height: calHeight_2k(161px);

        &_line {
          height: calHeight_2k(1px);
        }

        &_bg {
          height: calHeight_2k(161px);
        }

        &_title {
          height: calHeight_2k(18px);
          line-height: calHeight_2k(18px);
        }

        &_type {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }

        &_num {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }
      }
    }

  }

  .trackContainer {

    .track {
      height: calHeight_2k(41px);
      margin-top: calHeight_2k(5px);

      .icon {
        height: calHeight_2k(14px);
      }

      .name {
        height: calHeight_2k(14px);
        line-height: calHeight_2k(14px);
      }

      .type {
        margin-top: calHeight_2k(5px);
        height: calHeight_2k(8px);
        line-height: calHeight_2k(8px);
      }
    }
  }

  .intentionStyle {
    height: calHeight_2k(200px);
  }

  .intentionContainerPadding {
    padding-top: calHeight_2k(10px);
    padding-bottom: calHeight_2k(0px);
  }
}

</style>
